<template>
	<view>
		<topNav >
			<view class="top-nav-content">
				<view class="title">闪兑</view>
			</view>
		</topNav>
		<u-notice-bar v-show="noticeShow" mode="horizontal" :close-icon="true" color="#FFB721" font-size="30" bg-color="#4B4B4B" :is-circular="false" :list="['当前汇率：0.987']" @close="noticeShow=false"></u-notice-bar>
		<view class="top">
			<view class="unit green" @click="show=true">
				{{type}}
			</view>
			<view class="count">
				<u-input v-model="typeNumber" height="148" inputAlign="center" :customStyle="{fontSize:'48rpx',color:'#ccc'}" type="number" :border="false" placeholder="" />
			</view>
			<view class="unit yellow">
				燃料
			</view>
			<view class="count yellow">
				<u-input v-model="number" :disabled="true" height="148" inputAlign="center" :customStyle="{fontSize:'48rpx',color:'#ccc'}" type="number" :border="false" placeholder="" />
			</view>
			<view class="btn">
				<view class="icon"></view>
				<view class="name" @click="chanageFn">快速闪兑</view>
			</view>
		</view>
		<view class="title-wrapper">
			<view class="title">兑换记录</view>
			<view class="right" @click="gotoPage('/pages/flash/record')">
				查看全部
			</view>
		</view>
		<view class="detail-wrapper">
			<view class="list-warp">
				<view class="item">日期</view>
				<view class="item">价格/数量</view>
				<view class="item">状态</view>
			</view>
			<view class="list-warp" v-for="item in record">
				<view class="item">{{item.add_time}}</view>
				<view class="item">{{item.money}}/{{item.count}}</view>
				<view class="item" :class="item.state==1?'green':''">{{item.state==1?'成功':'失败'}}</view>
			</view>
		</view>
		<u-action-sheet :list="actionSheetList" v-model="show" @click="slectType"></u-action-sheet>
		<u-popup v-model="popupShow" mode="center" :custom-style="{background: 'none'}">
			<view class="popup-content">
				<view class="close-btn" @click="handleFun()"></view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<bottom-nav :currentIndex="2"></bottom-nav>
	</view>
</template>

<script>
	import topNav from 'components/top-nav/top-vue.vue';
	export default{
		components:{
			topNav:topNav
		},
		mounted() {
			this.$u.post('/api/getUserState', {account_id:uni.getStorageSync('account_id')}).then(res=>{
				if(res.code==200){
					if(res.data.state==0){
						this.popupShow=true;
					} else {
						this.popupShow=false;
					}
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error',
					})
				}
			})
			this.$u.post('/api/getAGTRldhb', {account_id:uni.getStorageSync('account_id')}).then(res=>{
				if(res.code==200){
					if(res.data.state==0){
						this.popupShow=true;
					} else {
						this.popupShow=false;
					}
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error',
					})
				}
			})
			this.getRecord();
		},
		
		computed:{
			number(){
				if(this.type=='AGT'){
					return parseInt(this.typeNumber*this.ratio.AGT/this.ratio.fuel)
				} else {
					return parseInt(this.typeNumber*this.ratio.USDT/this.ratio.fuel)
				}
			}
		},
		data(){
			return {
				type:'AGT',
				typeNumber:100,
				show: false,
				popupShow:false,
				noticeShow: true,
				record: [],
				ratio:{
					fuel:10,
					AGT: 20,
					USDT: 30
				},
				actionSheetList: [
					{
						text: 'AGT',
						color:'#6D6D6D'
					},
					{
						text: 'USDT',
						color:'#6D6D6D'
					},
				],
			}
		},
		methods:{
			getRecord(){
				// 获取记录
				this.$u.post('/api/ExchangeList', {account_id:uni.getStorageSync('account_id')}).then(res=>{
					if(res.code==200){
						this.record = res.data
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						})
					}
				})
			},
			slectType(index){
				this.type = this.actionSheetList[index].text
			},
			gotoPage(path){
				uni.navigateTo({
				    url: path
				});
			},
			chanageFn(){
				const params = {
					type: this.type,
					value: this.typeNumber,
					account_id:uni.getStorageSync('account_id')
				}
				this.$u.post('/api/fuelExchange', params).then(res=>{
					if(res.code==200){
						this.$refs.uToast.show({
							title: res.message,
							type: 'success',
						});
						this.getRecord();
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						})
					}
				})
			},
			handleFun(){
				this.$u.post('/api/activation', {account_id:uni.getStorageSync('account_id')}).then(res=>{
					if(res.code==200){
						this.popupShow=false;
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-nav-content{
		width:100%;
		display: flex;
		align-items: center;
		position:relative;
		.title{
			flex:1;
			text-align: center;
			font-size: 48rpx;
		}
	}
	.top{
		width:354*2rpx;
		background-image: url('/static/flash/banner.png');
		background-size: 100% 100%;
		height:354*2rpx;
		margin:40rpx auto;
		padding:0 38*2rpx;
		position:relative;
		.unit{
			font-size:18*2rpx;
			color:#69DA73;
			padding:36*2rpx 40rpx 14*2rpx;
			display: flex;
			align-items: center;
			&::after{
				content:'';
				display: block;
				width: 0;
				height: 0;
				border-top: 10rpx solid transparent;
				border-left: 12rpx solid #FFFFFF;
				border-bottom:10rpx solid transparent;
				margin:0 20rpx;
			}
			&.yellow{
				color:#FFB721
			}
		}
		.count{
			width:100%;
			height:74*2rpx;
			border-radius: 74rpx;
			border:1px solid #69DA73;
			background: rgba(105, 218, 115, 0.1);
			&.yellow{
				border-color: #FFB721;
				background: rgba(255, 183, 33, 0.1);
			}
		}
		.btn{
			display:flex;
			align-items: center;
			width: 216*2rpx;
			height: 61*2rpx;
			background: #FFB721;
			border-radius: 31*2rpx;
			position: absolute;
			bottom:-61rpx;
			left:50%;
			margin-left:-216rpx;
			justify-content: center;
			.icon{
				
			}
			.name{
				font-size:36rpx;
				
			}
		}
	}
	.title-wrapper{
		padding:0 40rpx;
		margin-top:110*2rpx;
		display: flex;
		align-items: center;
		margin-bottom:20rpx;
		.title{
			font-size:48rpx;
			flex:1;
		}
		.right{
			font-size: 24rpx;
			display: flex;
			align-items: center;
			&::after{
				content:'';
				display: block;
				width: 0;
				height: 0;
				border-top: 10rpx solid transparent;
				border-left: 12rpx solid #FFFFFF;
				border-bottom:10rpx solid transparent;
				margin:0 20rpx;
			}
		}
	}
	.popup-content{
		width:375*2rpx;
		height:483*2rpx;
		position:relative;
		background-image: url('/static/home/Group@2x.png');
		background-size: 100% 100%;
		.close-btn{
			width:60%;
			height:110rpx;
			left:50%;
			margin-left:-30%;
			position:absolute;
			bottom:80rpx;
		}
	}
	/deep/.u-mode-center-box{
		background: none;
	}
	.detail-wrapper{
		padding: 0 40rpx;
		margin-bottom: 130rpx;
		.list-warp{
			display:flex;
			&:nth-child(2){
				margin-bottom:40rpx;
			}
			margin-bottom:20rpx;
			.item{
				color:rgba(255,255,255, 0.8);
				&:nth-child(1){
					flex:4
				}
				&:nth-child(2){
					flex:3
				}
				&:nth-child(3){
					flex:2
				}
				&.green{
					color: rgba(105,218,115,0.8);
				}
			}
		}
	}
</style>
